<template>
	<view>
		<u-navbar leftText=" " title=" " placeholder>
			<view class="u-nav-slot" slot="left">
				基酒供应
				<view class="navline">

				</view>
			</view>
		</u-navbar>
		<view class="headerbox">
			<view class="headertab" :class="expaned?'showexpand':''">
				<view class="tab_item" @click="clicktab(item,index)" :class="curindex==index?'active':''" v-for="(item,index) in tablist" :key="index">
					{{item.name}}
				</view>
			</view>
			<!-- <view class="click_btn"  @click.stop="dropdown"><u-icon class="abtn" :name="expaned?'arrow-up':'arrow-down'"></u-icon></view> -->
		</view>
		
		
		<view class="list">
			<!-- <view class="" v-for="(item,index) in prolist" :key="index">
				<proitem :pro="item"></proitem>
			</view> -->
			<!-- 表单 -->
			
			<view class="form">
				<view class="formitem">
					<view class="label">
						公司
					</view>
					<input class="input" v-model="form.company" placeholder="请输入公司名称" placeholder-class="placeholder" type="text">
					<image class="more_icon" src="/static/img/more.png" mode=""></image>
				</view>
				<view class="formitem">
					<view class="label">
						个人
					</view>
					<input class="input" v-model="form.porson" placeholder="请输入个人名称" placeholder-class="placeholder" type="text">
					<image class="more_icon" src="/static/img/more.png" mode=""></image>
				</view>
				<view class="formitem">
					<view class="label">
						数量
					</view>
					<input class="input" v-model="form.num" placeholder="请输入数量" placeholder-class="placeholder" type="number">
					<image class="more_icon" src="/static/img/more.png" mode=""></image>
				</view>
				<view class="formitem">
					<view class="label">
						联系方式
					</view>
					<input class="input" v-model="form.phone" placeholder="请输入联系方式" placeholder-class="placeholder" type="number" maxlength="11">
					<image class="more_icon" src="/static/img/more.png" mode=""></image>
				</view>
			</view>
			<view class="tips" @click="clickto('/pages/jjgy/jilu')">
				上次提交记录
			</view>
			
		</view>
		<view class="btn" @click="submit">
			确认提交
		</view>
	</view>
</template>

<script>
	import {getProductByCateGory,getProductGroup} from '@/api/product.js'
	import {addWater} from '@/api/home.js'
	export default {
		data() {
			return {
				tablist:[],
				curindex:0,
				prolist: [],
				expaned:false,
				form:{
					type:'',
					company:'',
					porson:'',
					num:'',
					phone:''
				}
			};
		},
		methods:{
			dropdown(){
				this.expaned = this.expaned?!this.expaned:true;
			},
			
			clicktab(item,i){
				this.curindex=i
				this.form.type=item.name
			},
			submit(){
				let {company,porson,num,phone}=this.form
				console.log(this.form)
				if(!company){
					uni.showToast({
						title:'请输入公司名称',
						icon:'none'
					})
					return
				}
				if(!porson){
					uni.showToast({
						title:'请输入个人名称',
						icon:'none'
					})
					return
				}
				if(!num){
					uni.showToast({
						title:'请输入数量',
						icon:'none'
					})
					return
				}
				if(!phone){
					uni.showToast({
						title:'请输入联系方式',
						icon:'none'
					})
					return
				}
				
				addWater(this.form).then(res=>{
					console.log(res)
					if(res.data.code==1){
						uni.showToast({
							title:'提交成功',
							icon:'none'
						})
						this.form.company=''
						this.form.porson=''
						this.form.phone=''
						this.form.num=''
					}
				})
			},
			clickto(url){
				uni.navigateTo({
					url:url+'?type='+this.form.type
				})
			}
		},
		onLoad() {
			
		},
		onShow() {
			getProductGroup().then(res=>{
				this.tablist=res.data.data.categroy
				this.form.type=this.tablist[0].name
			})
		}
	}
</script>

<style lang="less">
	// page {
	// 	background-color: #F7F7F9;
	// }

	.u-nav-slot {
		position: relative;
		width: fit-content;
		font-size: 36rpx;
		color: #333333;
		font-weight: bold;

		.navline {
			width: 100%;
			height: 10rpx;
			background: #FE712A;
			opacity: 0.5;
			position: absolute;
			bottom: 0;
		}
	}

	.headertab {
		max-height: 170rpx;
		display: flex;
		align-items: center;
		// justify-content: space-between;
		flex-wrap: wrap;
		background-color: #fff;
		padding: 22rpx 30rpx 0;
		overflow: hidden;
		.tab_item {
			padding: 0 35rpx;
			line-height: 71rpx;
			border: 2rpx solid #7F7F7F;
			border-radius: 36rpx;
			width: fit-content;
			font-size: 26rpx;
			color: #8D8D8D;
			margin-bottom: 16rpx;
			margin-right: 14rpx;
		}

		.active {
			font-weight: bold;
			color: #FF6A06;
			border: 2rpx solid #FF6A07;
		}
	}
	.showexpand{
		max-height: 100%;
	}
	.list{
		padding: 0 30rpx;
		// display: flex;
		// align-items: center;
		// justify-content: space-between;
		// flex-wrap: wrap;
	}
	.headerbox{
		position: relative;
		padding-bottom: 40rpx;
		.click_btn{
			display: flex;
			align-items: center;
			width: 100%;
			height: 40rpx;
			text-align: center;
			justify-content: center;
			background-image: linear-gradient(#fff,#eeeeee90);
			position: absolute;
			bottom: 0;
			.abtn{
				margin: 0 auto;
				color: #eee;
			}
		}
	}
	.form {
		border-top: #F4F6F8 solid 2rpx;
		// padding: 6rpx 28rpx 0 31rpx;
	
		.formitem {
			height: 99rpx;
			display: flex;
			align-items: center;
			border-bottom: 1rpx solid #F4F6F8;
			padding: 0 2rpx 0 10rpx;
			font-size: 30rpx;
			color: #333333;
			justify-content: space-between;
			.label {
				width: 211rpx;
				font-weight: bold;
			}
	
			.input {
				flex: 1;
			}
	
			.placeholder {
				font-size: 30rpx;
				color: #8B8B8B;
			}
	
			.more_icon {
				width: 21rpx;
				height: 31rpx;
			}
		}
	
		.form_title {
			height: 96rpx;
			display: flex;
			align-items: center;
	
			.line {
				width: 8rpx;
				height: 28rpx;
				background: #FE712A;
				border-radius: 4rpx;
				margin-right: 10rpx;
			}
		}
	}
	.btn{
		width: 687rpx;
		line-height: 114rpx;
		background: linear-gradient(153deg, #FF8717, #FF5F00);
		border-radius: 57rpx;
		text-align: center;
		color: #FFFFFF;
		font-size: 36rpx;
		position: fixed;
		bottom: 234rpx;
		left: 31rpx;
	}
	.tips{
		text-align: center;
		font-size: 32rpx;
		color: #FF5F00;
		padding: 20rpx 0;
	}
</style>
